<template>
  <view class="body">
    <view class="header-title">工厂认证</view>
    <u-form
      :model="model"
      :rules="rules"
      ref="uForm"
      :errorType="errorType"
      label-width="150"
      :label-position="labelPosition"
    >
      <u-form-item label="工厂名称" prop="factoryName">
        <u-input
          :border="border"
          placeholder="请输入工厂名称"
          v-model="model.factoryName"
          type="text"
        ></u-input>
      </u-form-item>
      <u-form-item label="工厂简介" prop="description">
        <u-input
          type="textarea"
          :border="border"
          placeholder="请填写简介"
          v-model="model.description"
        />
      </u-form-item>
      <u-form-item label="工厂地址" prop="factoryAddress">
        <u-input
          :border="border"
          type="select"
          v-model="model.factoryAddress"
          placeholder="请选择工厂地址"
          @click="facPickerShow = true"
        ></u-input>
      </u-form-item>
      <u-form-item label="详细地址" prop="detailStreet">
        <u-input
          :border="border"
          type="text"
          v-model="model.address.detailStreet"
          placeholder="请输入详细地址"
        ></u-input>
      </u-form-item>
      <u-form-item label="收货地址" prop="receiving">
        <u-input
          :border="border"
          type="select"
          v-model="model.receiving"
          placeholder="请选择收货地址"
          @click="recPickerShow = true"
        ></u-input>
      </u-form-item>
      <u-form-item label="详细地址" prop="detailStreet">
        <u-input
          :border="border"
          type="text"
          v-model="model.warehouseAddress.detailStreet"
          placeholder="请输入详细地址"
        ></u-input>
      </u-form-item>
      <u-form-item label="车缝人数" prop="peoplenumber">
        <u-input
          :border="border"
          type="select"
          v-model="model.peoplenumber"
          placeholder="请选择工厂车缝人数"
          @click="selectShow = true"
        ></u-input>
      </u-form-item>
      <u-form-item label="营业执照" prop="businessLicenseImg">
		  <!-- 上传图片 -->
		  <uploud-images @upload="upload" @delsrc='delImage' typecode=1 :image-bg="bImg1" imgWidth='340px' imgHeight="188px"></uploud-images>
      </u-form-item>
      <u-form-item label="认证人姓名" prop="chargePerson">
        <u-input
          :border="border"
          placeholder="请输入认证人姓名"
          v-model="model.chargePerson"
          type="text"
        ></u-input>
      </u-form-item>
      <u-form-item label="收货人姓名" prop="warehouseChargePerson">
        <u-input
          :border="border"
          placeholder="请输入收货人姓名"
          v-model="model.warehouseChargePerson"
          type="text"
        ></u-input>
      </u-form-item>
      <u-form-item label="收货人手机" prop="warehouseChargePersonTel">
        <u-input
          :border="border"
          placeholder="请输入手机号"
          v-model="model.warehouseChargePersonTel"
          type="number"
        ></u-input>
      </u-form-item>
      <u-form-item label="联系人身份证" prop="idCardFrontImg">
		  <!-- 上传图片 身份证正面照 -->
		  <uploud-images @upload="upload" @delsrc='delImage' typecode=2 :image-bg="bImg2" imgWidth='340px' imgHeight="188px"></uploud-images>
      </u-form-item>
	  <u-form-item  prop="idCardBackImg">
	  		  <!-- 上传图片 身份证正面照 -->
	  		  <uploud-images @upload="upload" @delsrc='delImage' typecode=3 :image-bg="bImg3" imgWidth='340px' imgHeight="188px"></uploud-images>
	  </u-form-item>
      <u-form-item label="擅长类目" prop="wellCategory">
        <u-checkbox-group
          @change="wellCategoryChange"
          :width="radioCheckWidth"
          :wrap="radioCheckWrap"
        >
          <u-checkbox
            v-model="item.checked"
            v-for="(item, index) in wellCategoryList"
            :key="index"
            :name="item.name"
            >{{ item.name }}</u-checkbox
          >
        </u-checkbox-group>
      </u-form-item>
      <u-form-item label="加工模式" prop="productPattern">
        <u-checkbox-group
          @change="productPatternChange"
          :width="radioCheckWidth"
          :wrap="radioCheckWrap"
        >
          <u-checkbox
            v-model="item.checked"
            v-for="(item, index) in productPatternList"
            :key="index"
            :name="item.name"
            >{{ item.name }}</u-checkbox
          >
        </u-checkbox-group>
      </u-form-item>
    </u-form>
    <button
      class="user-set-btn"
      type="primary"
      @click="submit"
      :loading="loading"
    >
      提交
    </button>
    <u-select
      mode="single-column"
      :list="peopleNumberArr"
      v-model="selectShow"
      @confirm="selectConfirm"
    ></u-select>
    <u-picker
      mode="region"
      v-model="facPickerShow"
      @confirm="facAddressConfirm"
    ></u-picker>
    <u-picker
      mode="region"
      v-model="recPickerShow"
      @confirm="recAddressConfirm"
    ></u-picker>
  </view>
</template>

<script>
import uploudImages from "../../components/common/uploud-images.vue";
const actions = new Map([
		[1, ['businessLicenseImg']],
		[2, ['idCardFrontImg']],
		[3, ['idCardBackImg']],
])
export default {
  components:{
	uploudImages,
  },
  data() {
    return {
	  bImg1: require('../../static/image/businessLicenseImg.png'),
	  bImg2: require('../../static/image/idCardFrontImg.png'),
	  bImg3: require('../../static/image/idCardBackImg.png'),
      loading: false,
      model: {
		factoryNo:'',
        factoryAddress: '', //工厂地址(不传后端，为了前端展示)
        receiving: '', //收货地址(不传后端，为了前端展示)
        peoplenumber: '', //车缝人数(不传后端，为了前端展示，处理数据)
        factoryName: '', //工厂名称
        description: '', //工厂简介
        address: {
          //工厂地址
          provinceCode: '',
          provinceName: '',
          cityCode: '',
          cityName: '',
          countyCode: '',
          countyName: '',
          detailStreet: '',
        },
        warehouseAddress: {
          //收货地址
          provinceCode: '',
          provinceName: '',
          cityCode: '',
          cityName: '',
          countyCode: '',
          countyName: '',
          detailStreet: '',
        },
        factoryScale: {
          //车缝人数
          min: null,
          max: null,
        },
		reviewState:1,
        businessLicenseImg: '', //营业执照
        chargePerson: '', //认证人姓名
        warehouseChargePerson: '', //收货人姓名
        warehouseChargePersonTel: '', //收货人手机号
        idCardFrontImg: '', //身份证正面照
        idCardBackImg: '', //身份证反面照
        wellCategory: [], //擅长品类
        productPattern: [], //生产模式
      },
      peopleNumberArr: [
        {
          value: '0-10',
          label: '0-10',
        },
        {
          value: '10-20',
          label: '10-20',
        },
        {
          value: '20-30',
          label: '20-30',
        },
        {
          value: '30-50',
          label: '30-50',
        },
        {
          value: '50以上',
          label: '50以上',
        },
      ],
      rules: {
        factoryName: [
          {
            required: true,
            message: '请输入工厂名称',
            trigger: 'blur',
          },
        ],
        factoryAddress: [
          {
            required: true,
            message: '请选择工厂地址',
            trigger: 'change',
          },
        ],
        receiving: [
          {
            required: true,
            message: '请选择收货地址',
            trigger: 'change',
          },
        ],
        peoplenumber: [
          {
            required: true,
            message: '请选择车缝人数',
            trigger: 'change',
          },
        ],
        chargePerson: [
          {
            required: true,
            message: '请输入认证人姓名',
            trigger: 'blur',
          },
        ],
        warehouseChargePerson: [
          {
            required: true,
            message: '请输入收货人姓名',
            trigger: 'blur',
          },
        ],
        warehouseChargePersonTel: [
          {
            required: true,
            message: '请输入收货人手机号',
            trigger: ['change', 'blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value)
            },
            message: '手机号码不正确',
            trigger: ['change', 'blur'],
          },
        ],
        businessLicenseImg: [
          {
            required: true,
            message: '请上传营业执照',
            trigger: ['change', 'blur'],
          },
        ],
		idCardFrontImg: [
		  {
		    required: true,
		    message: '请上传身份证正面照',
		    trigger: ['change', 'blur'],
		  },
		],
		idCardBackImg: [
		  {
		    required: true,
		    message: '请上传身份证反面照',
		    trigger: ['change', 'blur'],
		  },
		],
      },
      border: false,
      wellCategoryList: [
        {
          name: '连衣裙',
          checked: false,
        },
        {
          name: '羽绒服',
          checked: false,
        },
        {
          name: '短外套',
          checked: false,
        },
        {
          name: '毛呢外套',
          checked: false,
        },
        {
          name: '棉衣棉服',
          checked: false,
        },
        {
          name: '雪纺/蕾丝衫',
          checked: false,
        },
        {
          name: '长外套/风衣',
          checked: false,
        },
      ],
      productPatternList: [
        {
          name: '流水式',
          checked: false,
        },
        {
          name: '整件式',
          checked: false,
        },
      ],
      facPickerShow: false,
      recPickerShow: false,
      selectShow: false,
      radioCheckWidth: 'auto',
      radioCheckWrap: false,
      labelPosition: 'top',
      codeTips: '',
      errorType: ['message'],
    }
  },
  onLoad() {
	  if (uni.getStorageSync('factoryinfo')) {
		  let factoryinfoObj = uni.getStorageSync('factoryinfo')
	  	this.model.factoryNo = factoryinfoObj.factoryNo;
	  }
	  uni.hideHomeButton()
	  uni.showToast({ title: '请完善认证信息', icon: 'none' });
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
			console.log(this.model)
		  this.$store.dispatch('addOrUpdateFactory',this.model).then(res=>{
			  if(res.data.errorCode === 0){
				  uni.showToast({ title: '提交成功', icon: 'none' });
				  uni.navigateTo({
				      url: '/pages/authentication/audit?auditInfo='+JSON.stringify(this.model)
				  });
			  }
		  })
        } else {
          this.$u.toast('请完成必填项')
        }
      })
    },
    // 擅长类目checkbox选择发生变化
    wellCategoryChange(e) {
      this.model.wellCategory = e
    },
    // 加工模式checkbox选择发生变化
    productPatternChange(e) {
      this.model.productPattern = e
    },
    // 工厂选择地区回调
    facAddressConfirm(e) {
      console.log(e)
      this.model.factoryAddress =
        e.province.label + '-' + e.city.label + '-' + e.area.label
      this.model.address.provinceCode = e.province.value
      this.model.address.provinceName = e.province.label
      this.model.address.cityCode = e.city.value
      this.model.address.cityName = e.city.label
      this.model.address.countyCode = e.area.value
      this.model.address.countyName = e.area.label
    },
    //收货选择地区回调
    recAddressConfirm(e) {
      this.model.receiving =
        e.province.label + '-' + e.city.label + '-' + e.area.label
      this.model.warehouseAddress.provinceCode = e.province.value
      this.model.warehouseAddress.provinceName = e.province.label
      this.model.warehouseAddress.cityCode = e.city.value
      this.model.warehouseAddress.cityName = e.city.label
      this.model.warehouseAddress.countyCode = e.area.value
      this.model.warehouseAddress.countyName = e.area.label
    },
    // 选择商品类型回调
    selectConfirm(e) {
      this.model.peoplenumber = e[0].value
	  if(e[0].value !== '50以上'){
		  let numArr = e[0].value.split('-')
		  this.model.factoryScale.min = +numArr[0]
		  this.model.factoryScale.max = +(numArr[1] + '')
	  }else{
		  this.model.factoryScale.min = 50
		  this.model.factoryScale.max = 2147483647
	  }
    },
	//获取从子组件传来的图片路径
	upload(src,num){
		let action = actions.get(num)
		this.model[action[0]] = src
		 this.$refs.uForm.resetFields()
	},
	//删除图片
	delImage(src,num){
		let action = actions.get(num)
		this.model[action[0]] = ''
	},
  },
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.body {
  padding: 0 34upx !important;
  .header-title {
    // margin-top: 30upx;
    font-size: 35upx;
    font-weight: 700;
    line-height: 130upx;
  }
}
</style>
